<template>
  <div class="page-wrapper">
    <!-- 头部信息 -->
      <Row>
        <Col :xs="24">
          <div class="margin-up-down">
            <label>操作员：</label>
            <Input v-model="filterObj.createUserName" class='sone' />
          </div>
          <div class="margin-up-down">
            <label>状态：</label>
            <Select v-model="filterObj.authStatus" :key="filterObj" filterable class='stwo'>
                <Option value="all" key="all">全部</Option>
                <Option v-for="item in authStatusList" :value="item.dictValue" :key="item.dictValue">{{ item.dictName }}</Option>
            </Select>
          </div>
          <div class="margin-up-down">
            <div class="filter-item">					
              <DatePicker type="daterange" v-model="filterObj.time" placement="bottom-end" placeholder="申请日期" separator='至' class='ssix'></DatePicker>						
            </div>
          </div>
          <div class="margin-up-down">
            <Button type="primary" class='sthree' @click="handleSearch" icon="ios-search">查询</Button>
            <Button class='sthree' @click="handleReset">重置</Button>
          </div>
        <div class="margin-up-down sfour">
          <Button type="primary" @click="addPurchase">添加采购单</Button>
        </div>
        </Col>
      </Row>
      <div class='sfive'>
        <tablePlus 
          :pagination="pagination"
          @on-change="onChange"
          :data="dataSource"
          :columns="columns"
          :loading="loading"
          stripe
        />
      </div>
      <Modal title="确认删除弹窗"
          v-model="reviewYesStatus"
          class="shenhe-vertical-center-modal"
          footer-hide
          >
          <p>
              确认删除采购单{{orderNo}}吗？,删除后不可恢复！
          </p>
          <div class="btn-group" style="textalign: center; paddingtop: 20px">
              <Button
              type="primary"
              :loading="loading"
              style="marginleft: 20px"
              @click="deletePurchaseById(id)"
              >
              <Icon type="ios-checkmark" style="margin-right: 5px" />确认
              </Button>
              <Button style="marginleft: 20px" @click="reviewYesStatus = false">
              <i
                  class="iconfont icon-butongyi"
                  style="font-size: 14px; margin-right: 5px"
              ></i
              >取消
              </Button>
          </div>
        </Modal>
  </div>
</template>

<script>
import api from "@/api/commonApi";
import tablePlus from "@/components/tablePlus";
import Utils from '@/utils';
import { DatePicker } from "view-design";
const filterObj = {
  createUserName: null,
  authStatus: 'all',
  time: null,
  startTime: null,
  endTime: null
};
const pagination  ={
  pageNo: 1,
  pageSize: 10,
  count: 0
};
export default {
  components: {
    tablePlus,
    DatePicker
  },
  data() {
    const that = this;
    return {
      reviewYesStatus: false,
      authStatusList: [
        {dictName: '未提交', dictValue: 0},
        {dictName: '已提交', dictValue: 1}
      ],
      filterObj: { ...filterObj },
      pagination: { ...pagination },
      dataSource: [],
      columns: [
        { type: 'sum', width: 60, align: 'center', title: '排序',
          render: (h, params) => {
              let sum = (this.pagination.pageNo-1)*this.pagination.pageSize + params.index +1;
              return h("span", sum);
          }
        },
        { key: 'orderNo', title: '采购单号' },
        { key: 'createTime', title: '采购日期' },
        { key: 'supplierName', title: '供应商' },
        { key: 'purchaseNum', title: '采购总数量' },
        { key: 'purchaseMoney', title: '采购总金额' },
        { key: 'purchasePaidMoney', title: '实付金额' },
        { key: 'createUserName', title: '操作员' },
        { key: 'status', title: '采购申请状态', render(h, params) {
          return (that.authStatusList.filter(item => item.dictValue == params.row.status)[0] || {}).dictName;
        } },
        {
          key: '_opertate', title: '操作', render(h, params) {
            const { id, orderNo, status  } = params.row;
            return status == 0 ? h('div',[
              h('Button', {
                  props: {
                      type: 'primary',
                      size: 'small'
                  },
                  style: {
                      margin: '0px 6px'
                  },
                  on: {
                      click: () => {
                        that.jumpTo('/index/drugfirmsmanage/procurement/purchaseOrderMgt/edit/' + id);
                      }
                  }
                }, '编辑'),
              h('Button', {
                  props: {
                      type: 'error',
                      size: 'small'
                  },
                  style: {
                      margin: '0px 6px',
                  },
                  on: {
                      click: () => {
                        that.reviewYesStatus = true
                        that.orderNo = orderNo
                        that.id = id
                        // that.$Modal.confirm({
                        //     content: `确认删除采购单【${orderNo}】吗？,删除后不可恢复！`,
                        //     loading: true,
                        //     onOk: () => {
                        //         that.deletePurchaseById(id);
                        //     }
                        // });
                      }
                  }
              }, '删除'),
              ]) : h('Button', {
                  props: {
                      type: 'primary',
                      size: 'small'
                  },
                  style: {
                      margin: '0px 6px'
                  },
                  on: {
                      click: () => {
                          that.jumpTo('/index/drugfirmsmanage/procurement/purchaseOrderMgt/review/' + id)
                      }
                  }
              }, '申请详情')
          }
        }
      ],
      loading: false,
    }
  },
  created() {
    let breadList = [
        { path: "/index", title: "首页" },
        {
            path: "",
            title: "采购管理"
        },
        {
            path: "/index/drugfirmsmanage/procurement/purchaseOrderMgt/list",
            title: "采购单管理"
        }
    ];
    this.$emit("changeBreadList", breadList);
    // 初始化筛选状态
    const { pagination, filterObj } = this.$route.query;
    pagination && (this.pagination = JSON.parse(decodeURIComponent(pagination)));
    filterObj && (this.filterObj = JSON.parse(decodeURIComponent(filterObj)));
  },
  mounted() {
    this.findPurchaseByPage();
  },
  methods: {
    addPurchase() {
      this.jumpTo('/index/drugfirmsmanage/procurement/purchaseOrderMgt/add');
    },
    handleSearch() {
      this.pagination.pageNo = 1;
      this.findPurchaseByPage();
    },
    handleReset() {
      this.filterObj = { ...filterObj };
      this.pagination = { ...pagination };
      if(this.filterObj.time&&this.filterObj.time.length>0){
				this.filterObj.startTime = Utils.getNowDateBySpecialFormat(this.filterObj.time[0]);
				this.filterObj.endTime = Utils.getNowDateBySpecialFormat(this.filterObj.time[1]);
			}
      this.findPurchaseByPage();
    },
    onChange(pagination) {
      this.pagination = { ...pagination }
      this.findPurchaseByPage();
    },
    addSupply() {
      this.jumpTo('/index/drugfirmsmanage/procurement/supplier/add');
    },
    jumpTo(path, query = {}) {
      this.$router.push({
        path,
        query: Object.assign({
          filterObj: encodeURIComponent(JSON.stringify(this.filterObj)),
          pagination: encodeURIComponent(JSON.stringify(this.pagination))
        }, query)
      });
    },
    findPurchaseByPage() {
      const reqBody = {
        ...this.filterObj,
        page: this.pagination.pageNo,
        row: this.pagination.pageSize
      };
      reqBody.authStatus === 'all' && (delete reqBody.authStatus);
      if(this.filterObj.time){
				this.filterObj.startTime = Utils.getNowDateBySpecialFormat(this.filterObj.time[0]);
				this.filterObj.endTime = Utils.getNowDateBySpecialFormat(this.filterObj.time[1]);
			}
      console.log(reqBody);
      this.loading = true;
      this.$axios.post(api.getPurchaseByPage, reqBody).then(res => {
          if (res.data.code === 1) {
            this.loading = false;
              const { records, total, current } = res.data.object;
              this.dataSource = records;
              this.pagination.count = total;
              if (!this.dataSource && (current !== 1)) {
                this.pagination.pageNo = this.pagination.pageNo - 1;
                this.findPurchaseByPage();
              }
          } else {
              this.$Message.error(res.data.message);
          }
          this.loading = false;
      });
    },
    deletePurchaseById(id) {
      this.$axios.post(api.deletePurchaseById, {id}).then(res => {
        this.loading = false;
          if (res.data.code === 1) {
              this.$Message.success('操作成功');
              this.reviewYesStatus = false
              this.findPurchaseByPage();
          } else {
              this.$Message.error(res.data.message);
          }
          // this.$Modal.remove();
      }).catch(() => {
        // this.$Modal.remove();
      });
                                    
    }
  }
}
</script>

<style scoped lang="less">
.sone{width:220px;}
.stwo{width:120px;}
.sthree{width:75px;}
.sfour{float:right;}
.sfive{padding: 10px 0 20px;}
.ssix{width: 200px;}

.margin-up-down {
    display: inline-block;
    margin-top: 10px;
  }
.filter-part {
  display: flex;
  flex-wrap: wrap;
  .filter-item {
    display: flex;
    margin: 10px 10px 10px 0;
    label {
      white-space: nowrap;
      line-height: 32px;
      padding-left: 5px;
      text-align: right;
    }
    .input {
      width: 220px;
    }
    .select {
      width: 70px;
    }
  }
  .filter-btn-group {
    margin: 10px 10px 10px 0;
    flex: 0 0 auto;
  }
}
.btn-group {
    padding: 20px 0;
    text-align: center;
}
</style>